<template>
  <div class="class_allhelp">
    <div class="titleList">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          @click.native="
            () => {
              $router.go(-1);
            }
          "
          class="class_link"
          >工作台</el-breadcrumb-item
        >
        <el-breadcrumb-item>全部动态</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="class_search_list">
      <el-date-picker
        v-model="value"
        type="datetimerange"
        size="small"
        @change="getDate"
        value-format="yyyy-MM-dd HH:mm:SS"
        style="margin-right: 12px; width: 330px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-input
        clearable
        v-model="keyword"
        style="width: 160px; margin-right: 12px"
        placeholder="输入关键字查询"
        size="small"
        @keydown.native.enter="todoSearch"
      />
      <el-button type="primary" size="small" @click="todoSearch"
        >查询</el-button
      >
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="内容" align="center">
        <template slot-scope="scope">
          <div v-html="getHtml(scope.row.logDesc)"></div>
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        prop="addTime"
        align="center"
      ></el-table-column>
    </el-table>
    <div class="class_block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pn"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="ps"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { opetateLogList } from "@/service/stageApi";

export default {
  name: "allHelp",
  components: {},
  props: [],
  data() {
    return {
      tableData: [],
      value: [],
      ps: 10,
      pn: 1,
      keyword: "",
      total: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getHtml(str) {
      let start = str.indexOf("【");
      let end = str.indexOf("】");
      let newStr = "";
      if (start == -1 && end == -1) {
        let start = str.indexOf("[");
        let end = str.indexOf("]");
        // if (start == -1 && end == -1) {
        let newStart = str.substring(0, start);
        let newEnd = str.substring(end + 1, str.length);
        let content = str.substring(start, end + 1);
        newStr = `<div style='color:#909399'  >${newStart}<span style='color:#00b98d'>${content}</span>${newEnd}</div>`;
        // }
        //  else {
        //   let newStart = str.substring(0, start - 1);
        //   let newEnd = str.substring(end + 1, str.length);
        //   let content = str.substring(start, end + 3);
        //   newStr = `<div>${newStart}<span style='color:green'>${content}</span>${newEnd}</div>`;
        // }
      } else {
        let newStart = str.substring(0, start);
        let newEnd = str.substring(end + 1, str.length);
        let content = str.substring(start, end + 1);
        newStr = `<div style='color:#909399'  >${newStart}<span style='color:#00b98d'>${content}</span>${newEnd}</div>`;
      }
      return newStr;
    },
    todoSearch() {
      this.pn = 1;
      this.getData();
    },
    getData() {
      let beginTime = this.value ? this.value[0] : "";
      let endTime = this.value ? this.value[1] : "";
      opetateLogList({
        pn: this.pn,
        ps: this.ps,
        beginTime,
        endTime,
        keyword: this.keyword,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          this.$message.error(`${res.message}`);
        }
      });
    },
    handleSizeChange(ps) {
      this.ps = ps;
      this.getData();
    },
    handleCurrentChange(pn) {
      this.pn = pn;
      this.getData();
    },
    getDate(val) {
      if (!val || val.length <= 0) {
        return;
      }
      this.value = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.class_allhelp {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.titleList {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
}
.class_search_list {
  display: flex;
  align-content: center;
  justify-content: flex-end;
  margin-bottom: 15px;
  float: left;
}
.class_block {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
  margin-top: 10px;
}
</style>

<style >
.class_link .el-breadcrumb__inner {
  cursor: pointer;
  font-weight: 600;
}
</style>